<template>
  <div>
    <top></top>
    <frame2 title="创建项目">
      <div id="content">
        <!--          三个操作按钮-->
        <div class="operation">
          <el-row>
            <el-button type="success" icon="el-icon-check" circle title="提交"></el-button>
            <el-button type="primary" icon="el-icon-edit" circle title="编辑"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle title="删除"></el-button>
          </el-row>
        </div>

        <div class="row"><div>项目名称</div><div>Bug管理系统</div> </div>
        <div class="row"><div>Bug标题</div><div>容易解决的小Bug</div></div>
        <div class="row"><div>创建时间</div><div>2021-12-04 11:49:38</div></div>
        <div class="row"><div>优先级</div><div>紧急</div></div>
        <div class="row"><div>状态</div><div>未修复</div></div>
        <div class="row"><div>创建者</div><div>爱数学的小龙</div></div>
        <div class="row"><div>处理者</div><div>内卷的312</div></div>
        <div class="row"><div>描述</div><div>将八皇后问题的算法从枚举法改成回溯法</div></div>

        <div class="row">
          <div>处理过程</div>
          <div>
            <div class="circle">
              <div>创建</div>
              <div>
                <div class="name">爱数学的小龙</div><div class="note">将八皇后问题的算法从枚举法改成回溯法将八皇后问题的算法从枚举法改成回溯法</div>
                <div class="time">2021-12-05 12:49:38</div>
              </div>
            </div>
            <div class="line"><div>|</div></div>
            <div class="circle">
              <div>处理</div>
              <div>
                <div class="name">内卷的312</div><div class="note">改回回溯法</div>
                <div class="time">2021-12-05 12:49:38</div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div>状态修改</div>
          <div>
            <el-radio-group v-model="solution">
              <el-radio-button label="已经解决"></el-radio-button>
              <el-radio-button label="保持不变"></el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="row">
          <div>备注</div>
          <div>
            <el-input
              type="textarea" width="40%"
              :autosize="{ minRows: 6, maxRows: 12}"
              placeholder="请输入内容" show-word-limit maxlength="200"
              v-model="note">
            </el-input>
          </div>
        </div>

        <div class="row">
          <div></div>
          <div>
            <el-button type="primary" style="width:10%;" round>提交</el-button>
          </div>

        </div>

      </div>
    </frame2>
    <bottom></bottom>
  </div>
</template>

<script>
import Frame2 from "./Frame";
import bottom from "../base/bottom";
import top from "../base/top";
export default {
  name: "BugEdit2",
  components:{Frame2,top,bottom},
  data(){
    return{
      solution:"已经解决",
      note:''
    }
  }
}
</script>

<style scoped>
#content{
  width:100%;
  position: relative;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border:1px solid #e9e9eb;
  padding:10px 20px;
}

#content .row{
  width: 100%;
  padding-top:5px;
  padding-bottom:5px;


  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row > div:first-child{
  width:10%;
  text-align: right;
  padding-right:20px;
}
.row > div:last-child{
  width:89%;
}

/* -------处理过程--------------- */
.circle{
  background-color:#c6e2ff;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}
.row .circle > div:first-child,.row .line > div:first-child{
  width: 40px;
  line-height: 40px;
  text-align: center;
}
/* 圆形 */
.row .circle > div:first-child{
  height: 40px;
  border:1px #409EFF solid;
  background-color:white;
  border-radius: 20px;
  color:#409EFF;

}
.row .line > div:first-child{
  color:#409EFF;
  font-size:24px;
  height: 28px;
  line-height: 28px;
  font-weight: lighter;
}

.circle > div{
  display: inline-block;
}
.circle > div:last-child{
  width:90%;
  height:40px;
  /* 不换行 */
  white-space: nowrap;
  line-height: 40px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.name, .note, .time{
  /*超出范围的名称省略*/
  overflow: hidden;
  text-overflow:ellipsis;
}
.name{
  width:20%;
}
.note{
  width:57%;
  text-indent: 2em;

}
.time{
  width:20%;
}


.operation{
  position: absolute;
  right:20px;
}
</style>
